// 指数调控
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Table, Input } from "antd";
import tipIcon from "../../../assets/images/dapp/tip_icon.svg";
import searchIcon from "../../../assets/images/dapp/search.svg";
import settiongIcon from "../../../assets/images/dapp/setting.svg";
import copyIcon from "../../../assets/images/dapp/copy.svg";
import { CopyOutlined } from "@ant-design/icons";
import { RegulationModal } from "./components/regulationModal";
import { ControlRecords } from "./components/controlRecords";
import { ChangeRecords } from "./components/changeRecords";
import { IndexRegulationSettingModal } from "./components/settingModal";
import { AgreeNotice } from "./components/agreeNotice";
import DropdownIcon from "../../../assets/images/dapp/dropdown.svg";
import CopyIcon from "../../../assets/images/copy.svg";
import CopyIconHover from "../../../assets/images/copy_hover.svg";
import CircleCheckedIcon from "../../../assets/images/dapp/circleChecked.svg";
import CopyDarkIcon from "../../../assets/images/copy_hover_dark.svg";
import { use } from "i18next";

const { Search } = Input;
const IndexRegulation = () => {
  const { t } = useTranslation();
  const regulationModalRef = useRef();
  const agreeNoticeRef = useRef();
  const [changeRecordsVisible, setChangeRecordsVisible] = useState(false);
  const [controlRecordsVisible, setControlRecordsVisible] = useState(false);
  const [settingVisible, setSettingVisible] = useState(false);
  const [searchInputVisible, setSearchInputVisible] = useState(false);
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );

  const [statusKey, setStatusKey] = useState(0);
  const [copyRecord, setCopyRecord] = useState({});
  const [copying, setCopying] = useState(false);
  const [statusSelectVisible, setStatusSelectVisible] = useState(false);
  const columns = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.token"),
      dataIndex: "b",
      key: "b",
      align: "center",
      render: (text, record) => <div className="token-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.contractAddress"),
      dataIndex: "c",
      key: "c",
      align: "right",
      render: (text, record) => (
        <div className="contract-address">
          {addressFormat(text)}{" "}
          {copying && copyRecord.a == record.a ? (
            <img src={CircleCheckedIcon} className="copy-success-icon" />
          ) : record.i == 0 ? (
            <img src={CopyDarkIcon} className="copy-icon" />
          ) : (
            <img src={CopyIcon} className="copy-icon" />
          )}{" "}
          {copying ? null : (
            <img
              src={CopyIconHover}
              className="copy-icon-hover"
              onClick={() => handleCopy(record)}
            />
          )}
        </div>
      ),
    },
    {
      title: t("dappIndexRegulation.circulation"),
      dataIndex: "d",
      key: "d",
      align: "right",
      render: (text, record) => <span>{parseFloat(text).toFixed(8)} M</span>,
    },
    {
      title: t("dappIndexRegulation.currentMarketValue"),
      dataIndex: "e",
      key: "e",
      align: "center",
      render: (text, record) => <span>{parseFloat(text).toFixed(4)} B</span>,
    },
    {
      title: t("dappIndexRegulation.currentPrice"),
      dataIndex: "f",
      key: "f",
      align: "right",
      render: (text, record) => <span>{parseFloat(text).toFixed(4)}</span>,
    },
    {
      title: t("dappIndexRegulation.realTimePosition"),
      dataIndex: "g",
      key: "g",
      align: "right",
      render: (text, record) => <span>{parseFloat(text).toFixed(4)}</span>,
    },
    {
      title: t("dappIndexRegulation.positionValue"),
      dataIndex: "h",
      key: "h",
      align: "right",
      render: (text, record) => <span>{parseFloat(text).toFixed(4)}</span>,
    },
    {
      title: t("dappIndexRegulation.weight"),
      dataIndex: "i",
      key: "i",
      align: "center",

      render: (text, record) => <span>{parseFloat(text).toFixed(2)}%</span>,
    },
    {
      title: t("dappIndexRegulation.action"),
      dataIndex: "j",
      key: "j",
      align: "right",
      render: (text, record) => (
        <div
          className={record.k == 0 ? "action-text-dark" : "action-text "}
          onClick={() => {
            setChangeRecordsVisible(true);
          }}
        >
          {t("dappIndexRegulation.changeRecord")}
        </div>
      ),
    },
  ];

  const dataSource = [
    {
      a: "1",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: 0,
      j: "1568.9828",
    },
    {
      a: "2",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: 0,
      j: "1568.9828",
      k: 0,
    },
    {
      a: "3",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "4",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "5",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "6",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "7",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "8",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
    {
      a: "9",
      b: "ETH",
      c: "0x123s3c…g4df4r",
      d: "5,734.1793",
      e: 49534853.194512345,
      f: 456.789034,
      g: 123.456789,
      h: 1234.567899,
      i: "228.7619",
      j: "1568.9828",
    },
  ];

  // 显示指数调控注意
  const showAgreeNotice = () => {
    agreeNoticeRef.current.open();
  };

  // 指数调控
  const handleShowRegulationModal = () => {
    regulationModalRef.current.open();
  };

  const closeControlRecords = () => {
    setControlRecordsVisible(false);
  };

  const closeChangeRecords = () => {
    setChangeRecordsVisible(false);
  };

  const closeSetting = () => {
    setSettingVisible(false);
  };

  const handleShowSearch = () => {
    setSearchInputVisible(true);
  };

  const onSearch = () => {};

  const handleCopy = (record) => {
    setCopyRecord(record);
    setCopying(true);

    setTimeout(() => {
      setCopying(false);
    }, 2000);
  };

  const addressFormat = (str) => {
    if (str.length <= 10) {
      // 如果字符串长度小于10，则不做任何修改
      return str;
    }
    return str.slice(0, 4) + "..." + str.slice(-6);
  };

  const handleShowStatus = () => {
    setStatusSelectVisible(true);
  };

  const handleSelectStatus = (e,val) => {
    e.stopPropagation();
    setStatusSelectVisible(false);
    setStatusKey(val);
  };
  
  useEffect(() => {

    console.log("statusKey====", statusKey);
  }, [statusKey]);


  return (
    <div className="dapp-index-regulation-page">
      <div className="top-title">
        <div className="left">
          <img src={tipIcon} className="tip-icon"></img>
          <div className="title">{t("dappIndexRegulation.title")}</div>
          {deviceType === "PC" ? (
            <div className="status-select" onClick={() => handleShowStatus()}>
              {statusKey == 1
                ? t("dappIndexRegulation.allStatus")
                : statusKey == 2
                ? t("dappIndexRegulation.effectStatus")
                : t("dappIndexRegulation.invalidStatus")}
              <img src={DropdownIcon} className="dropdown-icon"></img>
              {statusSelectVisible == true ? (
                <div className="drop-status-box" >
                  <div
                    className={
                      statusKey == 0 ? "status-item-checked" : "status-item "
                    }
                    onClick={(e) => handleSelectStatus(e,1)}
                  >
                    {" "}
                    {t("dappIndexRegulation.allStatus")}
                  </div>
                  <div
                    className={
                      statusKey == 1 ? "status-item-checked" : "status-item "
                    }
                    onClick={(e) => handleSelectStatus(e,2)}
                  >
                    {" "}
                    {t("dappIndexRegulation.effectStatus")}
                  </div>
                  <div
                    className={
                      statusKey == 2 ? "status-item-checked" : "status-item "
                    }
                    onClick={(e) => handleSelectStatus(e,3)}
                  >
                    {" "}
                    {t("dappIndexRegulation.invalidStatus")}
                  </div>
                </div>
              ) : null}
            </div>
          ) : null}
        </div>
        <div className="right">
          {/* {deviceType === "PC" && searchInputVisible ? (
            <Search
              placeholder="input search text"
              allowClear
              size="small"
              onSearch={onSearch}
              className="search-input"
            />
          ) : null}
          {deviceType === "PC" &&  !searchInputVisible ? (
            <img
              src={searchIcon}
              className="search-icon"
              onClick={() => handleShowSearch()}
            ></img>
          ) : null} */}
          <div
            className="right-item"
            onClick={() => {
              setControlRecordsVisible(true);
            }}
          >
            {t("dappIndexRegulation.records")}
          </div>
          <div
            className="right-item"
            onClick={() => {
              showAgreeNotice();
            }}
          >
            {t("dappIndexRegulation.regulation")}
          </div>
          <img
            src={settiongIcon}
            className="setting-icon"
            onClick={() => {
              setSettingVisible(true);
            }}
          ></img>
        </div>
      </div>
      <div className="summary-data-box">
        <div className="summary-data-item">
          <div className="data-value white">0</div>
          <div className="data-label">
            {t("dappIndexRegulation.overallScore")}
          </div>
        </div>
        <div className="summary-data-item">
          <div className="data-value green">100</div>
          <div className="data-label">
            {t("dappIndexRegulation.effectiveScore")}
          </div>
        </div>
        <div className="summary-data-item">
          <div className="data-value gray">200</div>
          <div className="data-label">
            {t("dappIndexRegulation.invalidScore")}
          </div>
        </div>
        <div className="summary-data-item">
          <div className="data-value yellow">13,276.5446U</div>
          <div className="data-label">
            {t("dappIndexRegulation.totalPositionValue")}
          </div>
        </div>
      </div>
      <div className="table-box">
        {deviceType === "Mobile" ? (
          <div className="molde-table-header">
            <div className="filter-box">
              <div className="status-select">
                {t("dappIndexRegulation.all")}
                <span className="num-text">8</span>
              </div>
            </div>
            <div className="query-box"></div>
          </div>
        ) : null}
        <Table
          columns={columns}
          bordered={false}
          dataSource={dataSource}
          size="small"
          rowClassName={(record) => {
            return record.i == 0 ? "dark-cell" : "";
          }}
          pagination={false}
          scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
        />
      </div>

      <RegulationModal ref={regulationModalRef} />
      <ControlRecords
        visible={controlRecordsVisible}
        handleCloseControlRecords={closeControlRecords}
      />
      <ChangeRecords
        visible={changeRecordsVisible}
        handleCloseChangeRecords={closeChangeRecords}
      />
      <IndexRegulationSettingModal
        visible={settingVisible}
        handleCloseSetting={closeSetting}
      />
      <AgreeNotice
        ref={agreeNoticeRef}
        agreeClick={handleShowRegulationModal}
      />
    </div>
  );
};

export default IndexRegulation;
